/* eslint-disable react/jsx-pascal-case */
import React from 'react'
import { areaList } from '@vant/area-data'

const Card = () => {
    // 获取cookie
    let LoginUser = React.$cookie.load('LoginUser')
    // 实例化路由
    let navigate = React.$router.useNavigate()
    // 实例化表单
    const [form] = React.$vant.Form.useForm()
    // 名片数据
    const [card, setCard] = React.useState({})
    // 显示地区的选择框
    const [show, setShow] = React.useState(false)
    // 显示分类的选择框
    const [TypeShow, setTypeShow] = React.useState(false)
    // 分类数据
    const [type, setType] = React.useState([])
    // 选中地区
    const SelectRegion = (_, values) => {
        // 关闭弹出层
        setShow(false)
        let info = card
        let region_text = ''
        let [province, city, district] = values
        if (province) {
            region_text += province.text + '-'
        }
        if (city) {
            region_text += city.text + '-'
        }
        if (district) {
            region_text += district.text
        }
        info.region_text = region_text
        setCard(info)
    }
    // 提交事件
    const onCard = async (values) => {

        let data = {
            cardid: card.cardid ? card.cardid : 0,
            userid: LoginUser.id,
            nickname: values.nickname,
            email: values.email,
            sex: values.sex,
            mobile: values.mobile,
            content: values.content,
            typeid: card.typeid ? card.typeid : ''
        }

        if (values.avatar[0].file) {
            data.avatar = values.avatar[0].file
        }

        let district = card.code['2']

        if (district) {
            data.code = district
        }

        let result = await React.$api.CardAdd(data)

        if (result.code === 1) {
            React.$vant.Notify.show({
                type: 'success',
                message: result.msg,
                onClose: () => {
                    navigate('/user/base/index')
                }
            })
        } else {
            React.$vant.Notify.show({
                type: 'warning',
                message: result.msg
            })
        }
    }
    // 选中分类
    const SelectType = (_, values) => {
        // 关闭弹出层
        setTypeShow(false)
        let info = card
        info.typeid = values.id
        info.type_text = values.name
        setCard(info)
    }
    // 生命周期
    React.useEffect(() => {
        TypeList()
        Card()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
    // 返回
    const onBack = () => {
        navigate('/user/base/index')
    }
    // 行业列表
    const TypeList = async () => {
        let result = await React.$api.TypeIndex()

        if (result.code === 1 && result.data.length) {
            setType(result.data)
        } else {
            setType([{
                text: '暂无分类',
                value: 0
            }])
        }
    }
    // 获取名片数据
    const Card = async () => {
        let result = await React.$api.Card({ userid: LoginUser.id })
        let info = null
        let code = []
        if (result.code === 1 && result.data) {
            let data = result.data

            info = {
                cardid: data.id,
                nickname: data.nickname,
                mobile: data.mobile,
                email: data.email,
                sex: data.sex,
                typeid: data.typeid,
                type_text: data.type.name,
                content: data.content
            }


            if (data.province) {
                code.push(data.province.toString())
            }

            if (data.city) {
                code.push(data.city.toString())
            }

            if (data.district) {
                code.push(data.district.toString())
            }

            if (data.region_text) {
                info.region_text = data.region_text
            }

            if (data.avatar) {
                info.avatar = [{
                    url: data.avatar_cdn
                }]
            }
        } else {
            info = {
                nickname: LoginUser.nickname,
                email: LoginUser.email,
                sex: LoginUser.sex,
                mobile: '',
                content: LoginUser.content
            }

            if (LoginUser.province) {
                code.push(LoginUser.province.toString())
            }

            if (LoginUser.city) {
                code.push(LoginUser.city.toString())
            }

            if (LoginUser.district) {
                code.push(LoginUser.district.toString())
            }

            if (LoginUser.region_text) {
                info.region_text = LoginUser.region_text
            }

            if (LoginUser.avatar) {
                info.avatar = [{
                    url: LoginUser.avatar
                }]
            }
        }
        info.code = code
        setCard(info)
        form.setFieldsValue(info)
    }
    // 提交按钮组件
    const Footer = () => {
        return (
            <>
                <div className="action">
                    <button className="btn">提交</button>
                </div>
            </>
        )
    }
    //创建验证规则
    const rules = {
        nickname: [
            {
                required: true,
                message: '请输入昵称'
            }
        ],
        mobile: [
            {
                required: true,
                message: '请输入手机号码'
            }
        ],
        sex: [
            {
                required: true,
                message: '请选择性别'
            }
        ],
        region_text: [
            {
                required: true,
                message: '请选择地区'
            }
        ],
        type_text: [
            {
                required: true,
                message: '请选择行业'
            }
        ],
        email: [
            {
                required: true,
                message: '请输入登录邮箱'
            },
            {
                message: '邮箱输入的格式有误',
                pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
            }
        ],
    }
    return (
        <>
            {/* 返回 */}
            <React.$vant.NavBar
                title="生成名片"
                leftText="返回"
                onClickLeft={onBack}
            />
            {/* 表单 */}
            <React.$vant.Form
                className="profile wow fadeInUp"
                data-wow-delay="200ms"
                form={form}
                onFinish={onCard}
                footer={<Footer />}
            >
                {/* 昵称 */}
                <React.$vant.Form.Item
                    name='nickname'
                    label='昵称'
                    labelWidth='3em'
                    initialValue={card.nickname}
                    rules={rules.nickname}
                >
                    <React.$vant.Input placeholder='请输入昵称' />
                </React.$vant.Form.Item>
                {/* 邮箱 */}
                <React.$vant.Form.Item
                    name='email'
                    label='邮箱'
                    labelWidth='3em'
                    initialValue={card.email}
                    rules={rules.email}
                >
                    <React.$vant.Input placeholder='请输入邮箱' />
                </React.$vant.Form.Item>
                {/* 手机号 */}
                <React.$vant.Form.Item
                    name='mobile'
                    label='手机号'
                    labelWidth='3em'
                    initialValue={card.mobile}
                    rules={rules.mobile}
                >
                    <React.$vant.Input placeholder='请输入手机号' />
                </React.$vant.Form.Item>
                {/* 性别 */}
                <React.$vant.Form.Item
                    name='sex'
                    label='性别'
                    labelWidth='3em'
                    initialValue={card.sex}
                    rules={rules.sex}
                >
                    <React.$vant.Radio.Group direction='horizontal'>
                        <React.$vant.Radio name='0'>保密</React.$vant.Radio>
                        <React.$vant.Radio name='1'>男</React.$vant.Radio>
                        <React.$vant.Radio name='2'>女</React.$vant.Radio>
                    </React.$vant.Radio.Group>
                </React.$vant.Form.Item>
                {/* 城市地区 */}
                <React.$vant.Form.Item
                    label="地区"
                    onClick={() => setShow(true)}
                    initialValue={[card.province, card.city, card.district]}
                    labelWidth='3em'
                    isLink
                    rules={rules.region_text}
                >
                    {card.region_text ? card.region_text : '请选择地区'}
                </React.$vant.Form.Item>
                {/* 头像 */}
                <React.$vant.Form.Item
                    name='avatar'
                    label='头像'
                    labelWidth='3em'
                    initialValue={card.avatar}
                >
                    <React.$vant.Uploader maxCount='1' />
                </React.$vant.Form.Item>

                {/* 所属行业 */}
                <React.$vant.Form.Item
                    label="行业"
                    initialValue={card.type_text}
                    onClick={() => setTypeShow(true)}
                    labelWidth='3em'
                    rules={rules.type_text}
                >
                    {card.type_text ? card.type_text : '请选择所属行业'}
                </React.$vant.Form.Item>


                {/* 个人简介 */}
                <React.$vant.Form.Item
                    name="content"
                    label="简介"
                    initialValue=""
                    labelWidth='2em'
                >
                    <React.$vant.Field type="textarea" placeholder="请输入个人简介" maxlength={200} showWordLimit rows={2} />
                </React.$vant.Form.Item>

            </React.$vant.Form>
            {/* 地区弹出层 */}
            <React.$vant.Popup
                position="bottom"
                visible={show}
                onClose={() => { setShow(false) }}
            >
                <React.$vant.Area
                    title="选择地区"
                    value={card.code}
                    areaList={areaList}
                    onConfirm={SelectRegion}
                    onCancel={() => setShow(false)}
                />
            </React.$vant.Popup>
            {/* 行业弹出层 */}
            <React.$vant.Popup
                position="bottom"
                visible={TypeShow}
                onClose={() => setTypeShow(false)}
            >
                <React.$vant.Picker
                    title="所属行业"
                    columnsFieldNames={{
                        text: 'name',
                        value: 'id'
                    }}
                    columns={type}
                    defaultValue={card.typeid}
                    onCancel={() => { setTypeShow(false) }}
                    onConfirm={SelectType}
                />
            </React.$vant.Popup>
        </>
    )
}

export default Card